$(function() {
	var textareaHtml = null,
		spanHtml = null;
	$('.saveInput').click(function() {
		textareaHtml = $('#textareaHtml').val();

		spanHtml = textareaHtml.split(' ');
		console.log('转换前', spanHtml);

		changeTxt(spanHtml); //文本转换
	})

})

//文本转换
var serviceHtml = []; //前台展示代码
var serviceActive = []; //后台选择单词集合

function changeTxt(txt) {
	var txtOlder = txt; //转码前
	var txtNew = []; //转码后
	var showHtml = ''; //后台展示代码

	//["who", "are", "you?", "nice", "to", "meet", "you!", "and", "you."]

	//Unicode编码  A-Z:65-90,a-z:97-122,0-9:48-57,中文:19968-40869
	var obj = 'you?are';
	//	console.log(obj.charCodeAt(3));
	console.log(obj.substr(3, 1));

	for(var i = 0; i < txtOlder.length; i++) {
		var flag = true,
			NM = null;
		for(var j = 0; j < txtOlder[i].length; j++) {
			var CN = txtOlder[i].charCodeAt(j);
			if(CN > 47 && CN < 58 || CN > 64 && CN < 91 || CN > 96 && CN < 123 || CN > 19967 && CN < 40870) {
				flag = true;
			} else {
				flag = false;
				NM = j;

				console.log('特殊', txtOlder[i]);
				break;
			}
		}

		if(flag) {
			txtNew.push(txtOlder[i]);
		} else {
			var sign = txtOlder[i].substr(NM, 1); //特殊符号

			txtNew.push(txtOlder[i].substr(0, NM));
			txtNew.push(sign);
			txtNew.push(txtOlder[i].substr(NM + 1));
		}
	}

	console.log('转换后', txtNew);

	setTimeout(function() {
		for(var key in txtNew) {
			if(txtNew[key]) {
				showHtml += '<span>' + txtNew[key] + '</span>';

				serviceHtml.push(txtNew[key]);
			}
		}

		$('#modelBody').html(showHtml);
		console.log('前台展示代码', serviceHtml);

		//此处填写逻辑代码
		eventBtn();
	}, 100)

}

//逻辑代码
function eventBtn() {
	$('#modelBody span').click(function() {
		if($(this).hasClass('active')) {
			$(this).removeClass('active');
		} else {
			$(this).addClass('active');
		}
	});

	var spanGroup = $('#modelBody span');
	console.log(spanGroup);

	$('#contraInput').click(function() {
		spanGroup.each(function(key) {
			if($(this).hasClass('active')) {
				serviceActive.push({
					id: key,
					word: $(this).text()
				});
				
				delete serviceHtml[key];
			}
		})

		console.log('前台展示代码', serviceHtml);
		setTimeout(function() {
			console.log('后台选择单词集合', serviceActive);
			
			
			showBody();	//模拟前台展示效果
		}, 100)
	})

}

//前台展示效果
function showBody(){
	var showHtml = '';
	for(var i=0;i<serviceHtml.length;i++){
		if(!serviceHtml[i]){	//需要填写单词处
			showHtml += '<input type="text" />'
		}else{
			showHtml += serviceHtml[i] + ' ';
		}
	}
	
	$('#showBody').html(showHtml);
}
